/**
  * desc：  加载对话框
  * author：lawrence
  * date：  2019/3/22 上午10:16
  */
import React, {Component} from 'react';
import {ActivityIndicator, StyleSheet, View, Text, ViewPropTypes} from 'react-native';
import Colors from "../../theme/Colors";

type Props = {
    message: string,
    messageStyle: ViewPropTypes.style,
}

type State = {}

export default class Loading extends Component<Props, State> {

    static defaultProps = {
        message: '加载中...',
        messageStyle: null,
    };

    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const {message} = this.props;
        return (
            <View style={[styles.container, this.props.style]}>
                <ActivityIndicator style={styles.progress} size={'large'} color={Colors.white}/>
                {!!message ? this._renderMessage(message) : null}
            </View>
        );
    }

    /**
     * 加载提示语
     * @param message
     * @private
     */
    _renderMessage = (message) => {
        const {fontSize, messageStyle} = this.props;
        return (
            <Text style={[styles.message, messageStyle]} numberOfLines={1} ellipsizeMode='tail'>{message}</Text>
        );
    };
}

const styles = StyleSheet.create({
    container: {
        width: 90,
        height: 90,
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.background_dialog,
    },
    progress: {
        width: 15,
        height: 15,
    },
    message: {
        fontSize: 14,
        color: Colors.white,
        marginTop: 12,
        marginBottom: -8,
        marginHorizontal: 8,
        textAlign: 'center',
        textAlignVertical: 'center'
    },
});
